<!-----------收银台页面------------->
<template>
  <div>
    <topheader :toptitle="toptitle" :goback="goback"/>
    <p class="rechargetip">由于微信支付限额，如遇无法支付，请使用支付宝支付</p>
    <div class="wrapper recharge">
      <div class="wrapper-inner">
        <div class="charge-content">
          <div class="charge-item">
            <p class="goods">商品</p>
            <p class="goods-name">{{productName}}</p>
          </div>
          <div class="charge-item">
            <p class="realpay">实付</p>
            <p class="paymoney"><span>{{amount}}</span>元</p>
          </div>
        </div>
        <div class="paystyle-content">
          <p class="paystyle-title">请选择支付渠道<span>（适度娱乐理性消费）</span></p>
          <ul class="paystyle clearfix">
            <li class="paybox l" v-for="item in payList" :class="{active:item.isActive}" @click="activePay(item)">           	
	              <img :src="item.imgurl"/>
	              <span>{{item.name}}</span>
	              <div class="choosepay"></div>
            </li>
          </ul>
        </div>
        <p class="server mt130">客服QQ：<span v-text="message"
                                           v-clipboard:copy="message"
                                           v-clipboard:success="onCopy"
                                           v-clipboard:error="onError"></span></p>
      </div>
    </div>
  </div>
</template>

<script>
	import Vue from "vue"
  import topheader from "@/components/topheader"
  import {Toast} from 'mint-ui'
  import Message from "iview/src/components/message"
  import apiConfig from "../config/api.js"


	Vue.prototype.$Message = Message
  export default {
    name: 'recharge',
    components: {
      'topheader': topheader
    },
    data() {
      return {
      	goback: false,
        toptitle: "充值",
        productName: "",
        amount: "",
        message: "800063550",
        payList: [
          {name: '支付宝',code:"zfb", imgurl: "static/img/zhifubao.png", isActive: true}
//        ,
//        {name: '微信',code:"wx", imgurl: "static/img/weixin.png", isActive: false}
        ]

      }
    },
    created() {
    	this.productName = this.$route.params.productName,
    	this.amount = this.$route.params.amount
   	
    },
    methods: {
      activePay: function (item) {
        this.payList.forEach(function(obj){
          obj.isActive = false;
        });
        item.isActive = !item.isActive
        let code = item.code
        // 支付宝支付
        if (code == "zfb") {
          window.location.href = this.$route.params.alipay
        }
        // 微信支付       
//      if (code == "wx") {   
//        //window.location.href = this.$route.params.wxpay
//        //暂不支持微信支付
//        this.$Message.warning("暂不支持微信支付")
//      }       
      },
      onCopy: function (e) {
        let instance = Toast({
          message: '复制成功',
          position: 'middle',
          duration: 5000,
          iconClass: 'icon icon-success', //icon 图标的类名
          className: 'addClass'   //Toast 的类名。可以为其添加样式
        });
        setTimeout(() => {
          instance.close()
        }, 2000)
      },
      onError: function (e) {
        let instance = Toast({
          message: '该浏览器不支持自动复制',
          position: 'middle',
          duration: 5000
        });
        setTimeout(() => {
          instance.close()
        }, 2000)
      }
    }
      
  }

  
</script>
